<template>
  <div>
    <right-title subTitle="今日作业人员情况"></right-title>
    <div class="container">
      <vue-seamless-scroll :data="dataList"
                           :class-option="classOption"
                           class="up-scroll-view">
        <div v-for="(item, index) in dataList"
             :key="index"
             class="td-row flex-row align-center"
             @click="showMap">
          <img :src="item.avatar" />

          <div class="td-right">
            <div class="td-right-top">
              <div class="td-name">{{item.name}}</div>
              <div class="td-car" v-if="item.car">
                <img src="@/assets/images/car.png" />
                <div class="td-car-num">{{item.car}}</div>
              </div>
            </div>

            <div class="td-phone">电话：{{item.phone}}</div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>

    <modal ref="modal"
           type="info">
      <div id="container"
           class="map-container" />

    </modal>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import RightTitle from '@/components/RightTitle.vue';

import { apiGetTodayWorkSituation } from '@/api/api'
export default {
  components: {
    RightTitle,
    vueSeamlessScroll,
    // Modal,
  },
  data () {
    return {
      dataList: [

      ],
      classOption: {
        step: 0.4, // 数值越大速度滚动越快
        //limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 2000
      },

      firstArr: [119.633064,29.084162], //中心点/初始坐标=>联调时，用后台数据将此数据覆盖

      //绘制线路需要的坐标=>联调时，用后台数据将此数据覆盖(经纬度不要写反了,反了是出不来的)
      //绘制线路需要的坐标=>联调时，用后台数据将此数据覆盖(经纬度不要写反了,反了是出不来的)
      lineArr: [
      [119.633064,29.084162],
      [119.634706,29.084378],
      [119.635521,29.084509],
      [119.636487,29.084743],
      [119.636841,29.083862],
      [119.636948,29.083581],
      [119.637109,29.082896],
      [119.637345,29.082531],
      [119.63779,29.082568],
      [119.638364,29.082629],
      [119.639148,29.082807],
      [119.640226,29.083018],
      [119.639046,29.08239],
      [119.638026,29.081945],
      [119.637699,29.08134]
      ],
      map: null,
      marker: null,
    }
  },
  beforeDestroy () {//离开页面，销毁掉
    this.map && this.map.destroy();
  },
  created(){
    this.getData();
  },
  methods: {
    getData(){
      apiGetTodayWorkSituation().then((res)=>{
        if(res.code == 1){
          this.dataList = res.data;
        }
      })
    },
    showMap () {
      this.$refs.modal.info();

      this.$nextTick(() => {
        if (this) {
          this.map = new AMap.Map('container', {
            resizeEnable: true, // 窗口大小调整
            center: this.firstArr, // 中心 firstArr: [116.478935, 39.997761],
            zoom: 20,
            viewMode: '2D', // 设置地图模式
            // 地图模式
            lang: 'zh_cn' // 设置地图语言类型
          })

          // 添加工具栏
          this.map.plugin(['AMap.ToolBar', 'AMap.Scale'], () => {
            const toolbar = new AMap.ToolBar()// 工具条
            const scale = new AMap.Scale() // 比例尺
            this.map.addControl(toolbar)
            this.map.addControl(scale)
          })
          // 添加maker
          this.marker = new AMap.Marker({
            map: this.map,
            position: this.firstArr,
            icon: 'https://webapi.amap.com/images/car.png',
            offset: new AMap.Pixel(-26, -13), // 调整图片偏移
            autoRotation: true, // 自动旋转
            angle: -90 // 图片旋转角度
          })

          this.initroad();

          this.startAnimation();
        }
      })


    },


    //创建路径
    // 初始化轨迹
    initroad () {
      // 创建一个 icon
      var startIcon = new AMap.Icon({
        size: new AMap.Size(25, 34),
        image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
        imageSize: new AMap.Size(135, 40),
        imageOffset: new AMap.Pixel(-9, -3)
      });
      // 将 icon 传入 marker(起始标记)
      var startMarker = new AMap.Marker({
        // position: new AMap.LngLat(116.35, 39.89),
        position: this.lineArr[0],
        icon: startIcon,
        offset: new AMap.Pixel(-13, -30)
      });
      // 创建一个 icon
      var endIcon = new AMap.Icon({
        size: new AMap.Size(25, 34),
        image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
        imageSize: new AMap.Size(135, 40),
        imageOffset: new AMap.Pixel(-95, -3)
      });
      // 将 icon 传入 marker
      var endMarker = new AMap.Marker({
        // position: new AMap.LngLat(116.45, 39.93),
        position: this.lineArr[this.lineArr.length - 1],
        icon: endIcon,
        offset: new AMap.Pixel(-13, -30)
      });
      // 将 markers 添加到地图
      this.map.add([startMarker, endMarker]);


      // 绘制还未经过的路线
      this.polyline = new AMap.Polyline({
        map: this.map,
        path: this.lineArr,
        showDir: true,
        strokeColor: '#28F', // 线颜色--蓝色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 10, // 线宽
        // strokeStyle: "solid"  //线样式
        lineJoin: 'round' // 折线拐点的绘制样式
      })
      // 绘制路过了的轨迹
      var passedPolyline = new AMap.Polyline({
        map: this.map,
        strokeColor: '#AF5', // 线颜色-绿色
        // path: lineArr.reverse(),
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 // 线宽
        // strokeStyle: "solid"  //线样式
      })
      this.marker.on('moving', e => {
        passedPolyline.setPath(e.passedPath)
      })
      this.map.setFitView() // 合适的视口
    },
    startAnimation () {//车辆轨迹回放开始
      this.marker.moveAlong(this.lineArr, 100); //这里的1000000为速度，可根据绘制线路需要的坐标来调整
      //（调试时不要设置太小了，不然看不出来）
      //this.marker.moveAlong(this.lineArr, this.moveSpeed); 
    },
    pauseAnimation () {//车辆轨迹回放暂停
      this.marker.pauseMove();
    },
    resumeAnimation () {//车辆轨迹回放继续
      this.marker.resumeMove();
    },
    stopAnimation () {//车辆轨迹回放停止
      this.marker.stopMove();
    },
    carFastMove () {//车辆轨迹回放改变速度
      this.moveSpeed = this.moveSpeed * 200;
    },
    // 表格选中单行
    handleTableRow (row, event, column) {
      const This = this
      This.firstArr = []
      This.firstArr.push(row.longitude)
      This.firstArr.push(row.latitude)
      This.initMap()//初始化地图

      //获取后台路线数据
      //This.formData.deviceNumber = row.deviceNumber
      //This.getVehicleCarGpsData()//渲染轨迹
    },
    // 轨迹清除
    clearVehicleTrajectory () {
      const This = this
      This.initMap()//初始化地图
      //This.getVehicleCarGpsData()//后台数据渲染轨迹
    },
  }
}
</script>

<style lang="scss" scoped>
.map-container {
  width: 100%;
  height: 700px;
}
.container {
  margin-top: 20px;
  .up-scroll-view {
    margin-top: 2px;
    height: 290px;
    overflow: hidden;
    color: #fff;

    .td-row {
      width: 100%;
      margin-top: 12px;
      height: 84px;

      img {
        width: 84px;
        height: 84px;
        border-radius: 6px;
        border: 1px solid #979797;
      }

      .td-right {
        width: 290px;
        height: 70px;
        background: linear-gradient(
          90deg,
          #58b8fc 0%,
          rgba(114, 215, 246, 0.12) 100%
        );
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        // opacity: 0.4;

        padding-left: 23px;
        padding-right: 18px;

        .td-right-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 12px;

          .td-name {
            font-size: 18px;
            font-weight: 500;
            color: #fff;
            line-height: 25px;
          }

          .td-car {
            display: flex;
            flex-direction: row;
            align-items: center;

            img {
              width: 14px;
              height: 11px;
            }

            .td-car-num {
              font-size: 14px;
              color: #84f8fe;
              line-height: 20px;
            }
          }
        }

        .td-phone {
          font-size: 14px;
          color: #fff;
          line-height: 22px;
        }
      }
    }
  }
}
</style>